<template>
  <div>
    <lz-table ref="myTable">
      <div slot="tools">
        <a-button icon="plus" @click="getSelect" type="primary">测试</a-button>
        <a-button icon="plus" style="margin-left: 10px;">测试</a-button>
        <lz-upload-tools
          style="margin-left: 10px;"
          @beforeUpload="beforeUpload"
          @doneUpload="doneUpload"
          label="导入"
          :size="1"
          accept=".xlsx,.xls"
          action="http://localhost:8102/base/common/upload/image"
        />
      </div>
    </lz-table>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.tableInit();
  },
  methods: {
    search() {
      this.$refs.myTable.search();
    },
    tableInit() {
      this.$refs.myTable.init(
        {
          url: "http://localhost:9001/admin/admin/blog/category/getList",
          method: "get", // 请求方式（*）
          pagination: true, // 是否显示分页（*）
          queryParams: {}, // 默认参数
          pageNumber: 1, // 初始化加载第一页，默认第一页
          pageSize: 10, // 每页的记录行数（*）
          pageList: ['10', '25', '50', '100'], // 可供选择的每页的行数（*）
          showColumns: true, // 是否显示所有的列
          showRefresh: true, // 是否显示刷新按钮
          changeSize: true, // 允许改变列大小
          showCheckBox: true, // 显示复选框
          showIndex: true, // 显示序号
          height: 500, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
          columns: [
            {
              field: "title",
              title: "名称",
              sorter: "true",
              align: "left",
              width: 150,
            },
            {
              field: "path",
              title: "路由/权限",
              align: "left",
              width: 150,
            },
            {
              field: "icons",
              title: "图标",
              align: "left",
              width: 100,
              hidden: true,
            },
            {
              field: "menuType",
              title: "类型",
              sorter: "true",
              align: "center",
              width: 80,
              formatter: {
                type: "text",
                format: (row) => {
                  if (row.menuType === 0) {
                    return {
                      value: "目录",
                    };
                  } else if (row.menuType === 1) {
                    return {
                      value: "菜单",
                    };
                  } else if (row.menuType === 2) {
                    return {
                      value: "按钮",
                    };
                  } else {
                    return {
                      value: "-",
                    };
                  }
                },
              },
            },
            {
              field: "seq",
              title: "顺序号",
              sorter: "true",
              align: "right",
              width: 120,
            },
          ],
          operate: {
            items: [
              {
                label: "编辑",
                color: "primary",
                event: (row) => {
                  console.log(row);
                },
              },
              {
                label: "删除",
                color: "danger",
                event: (row) => {
                  this.$confirm({
                    title: "确认删除？",
                    content: "删除后将无法恢复！",
                    onOk: () => {
                      console.log(row);
                    },
                  });
                },
              },
            ],
          },
        },
        () => {
          this.search();
        }
      );
    },
    getSelect() {
      console.log(this.$refs.myTable.getSelected());
    },
    beforeUpload(file) {
      console.log(file);
    },
    doneUpload(file) {
      console.log(file);
    },
  },
};
</script>
<style></style>
